<%@ page pageEncoding="UTF-8" %>
<%@ include file="../common/IncludeTop.jsp"%>

<style>
    .okTips{
        color : green;
    }
    .errorTips{
        color : red;
    }
</style>

<script>

    /*
    var xhr;
    
    function checkUsername() {
        var username = document.getElementById("username").value;
        xhr = new XMLHttpRequest();
        xhr.onreadystatechange = fun1;
        xhr.open("GET","usernameExist?username="+username,true);
        xhr.send(null);
    }
    
    function fun1() {
        if(xhr.readyState === 4) {
            if(xhr.status === 200) {
                var tips = document.getElementById("usernameTips");
                var responseInfo = xhr.responseText;
                if(responseInfo === 'Exist') {
                    tips.className = 'errorTips';
                    tips.innerText = "用户名不可用";
                }
                else if(responseInfo === 'Not Exist') {
                    tips.className = 'okTips';
                    tips.innerText = "用户名可用";
                }
            }
        }
    }
    */

    $(function () {
        $('#username').on('blur',function () {
            $.ajax({
                type    : "GET",
                url     : "usernameExist?username="+this.value,
                success : function (data) {
                    if(data.msg === 'Exist') {
                        $('#usernameTips').attr("class","errorTips").text('用户名不可用');
                    }
                    else if (data.msg === 'Not Exist') {
                        $('#usernameTips').attr("class","okTips").text('用户名可用');
                    }
                }
            });
        });
    });

</script>

<div id="Catalog">

    <form action="newAccount" method="post" name="userInfo" id="userInfo">

        <h3>用户信息</h3>

        <table>
            <tr>
                <td>用户ID：</td>
                <td>
                    <%-- <input type="text" name="username" id="username" onblur="checkUsername()"/>--%>
                    <input type="text" name="username" id="username"/>
                    <div id="usernameTips"></div>
                </td>
            </tr>
            <tr>
                <td>密码：</td>
                <td><input type="password" name="password" /></td>
            </tr>
            <tr>
                <td>确认密码：</td>
                <td><input type="password" name="repeatedPassword"/></td>
            </tr>
            <tr>
                <td>验证码：</td>
                <td>
                    <input type="text" name="vCode" size="5" maxlength="4"/>
                    <a href="newAccount"><img border="0" src="verificationCode" name="checkcode"></a>
                </td>
            </tr>
        </table>

        <%@ include file="IncludeAccountFields.jsp" %>
        <font color="red">${requestScope.msg}</font><br>
        <input type="submit" name="newAccount" value="保存账号信息"/>

    </form>
</div>

</div>

<%@ include file="../common/IncludeBottom.jsp"%>
